import React, { useState } from "react";
import {
  FaChevronLeft,
  FaChevronRight,
  FaCalculator,
  FaCalendarAlt,
  FaClock,
  FaRuler,
  FaTools,
  FaDice,
  FaRandom
} from "react-icons/fa";
import Header from "./Header";
import Calculator from './tools/Calculator';
import Sidebar from '@/Sidebar';
import ToolCard from '@/components/ToolCard'
import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom';
import RandomStringGenerator from '@/components/RandomStringGenerator';

interface ToolItem {
    id?: string
    name?: string
    icon?: React.ReactNode
}

const tools: ToolItem[] = [
  { id: "calculator", name: "Calculator", icon: <FaCalculator /> },
  { id: "calendar", name: "Calendar", icon: <FaCalendarAlt /> },
  { id: "clock", name: "Clock", icon: <FaClock /> },
  { id: "ruler", name: "Ruler", icon: <FaRuler /> },
];

const ToolsPage = () => {
  const [isNavCollapsed, setIsNavCollapsed] = useState(false);
  const [selectedTool, setSelectedTool] = useState(tools[0]);
  const [showSection, setShowSection] = useState(false);
  const navigate = useNavigate();

  const toggleNav = () => {
    setIsNavCollapsed(!isNavCollapsed);
  };

  const selectTool = (tool: ToolItem) => {
    setSelectedTool(tool);
  };

  const handleToolCardClick = (path: string) => {
    setShowSection(false);
    navigate(path);
  };

  const renderToolInterface = () => {
    switch (selectedTool.id) {
      case "calculator":
        return <Calculator />;
      // Add cases for other tools
      default:
        return <p>Interface for {selectedTool.name} is not implemented yet.</p>;
    }
  };

  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <div className="flex-grow flex">
        <Sidebar />
        {/* <nav
          className={`text-white transition-all duration-300 ease-in-out ${
            isNavCollapsed ? "w-16" : "w-64"
          }`}
        >
          <div className="p-4 flex justify-between items-center">
            <h2 className={`font-bold ${isNavCollapsed ? "hidden" : "block"}`}>
              All Tools
            </h2>
            <button
              onClick={toggleNav}
              className="p-2 rounded hover:bg-gray-700 transition-colors"
            >
              {isNavCollapsed ? <FaChevronRight /> : <FaChevronLeft />}
            </button>
          </div>
          <ul>
            {tools.map((tool) => (
              <li key={tool.id}>
                <button
                  onClick={() => selectTool(tool)}
                  className={`w-full p-4 flex items-center hover:bg-gray-700 transition-colors ${
                    selectedTool.id === tool.id ? "bg-gray-700" : ""
                  }`}
                >
                  <span className="text-xl mr-4">{tool.icon}</span>
                  <span className={isNavCollapsed ? "hidden" : "block"}>
                    {tool.name}
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </nav> */}

        {/* Main content area */}
        <main className="flex-grow p-8">
            {   showSection ? (
                    <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        <ToolCard
                            to="/tools/random-string-generator"
                            icon={<FaRandom className="h-12 w-12" />}
                            title="Random String Generator"
                            description="Generate a string of any length, composed of any combination of letters, numbers, and special characters."
                        />
                    </section>
                ) : (
                    <Routes>
                        <Route path="/tools/random-string-generator" element={<RandomStringGenerator />} />
                        {/* Add more routes for other tools here */}
                    </Routes>
                )
            }
            
        </main>
      </div>
    </div>
  );
};

export default ToolsPage;
